<template>
	<view>
		<view class="navbar" :style="{'opacity':navbarStatus?1:0}">
			<view class="navBarGap"></view>
			<view class="flex align-item_center main border-box">
				<view class="back" @click="back">
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/nav/1.png" />
				</view>
				<view class="tabs">
					<up-tabs :list="tabsList" :current="tabCurrent" :scrollable="false" :itemStyle="itemStyle"
						:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" lineWidth="30" lineHeight="2" lineColor="#A72530"
						@click="jumpNav"></up-tabs>
				</view>
			</view>
		</view>

		<image :src="productDetail?.picUrl" class="mallDetails-head flex align-item_center justify-content_center"
			mode="aspectFill">
			<!-- <image class="block" /> -->
		</image>
		<view class="goods border-box">
			<view class="header flex align-item_center justify-content_space-between">
				<view class="name">{{productDetail?.name}}</view>
				<view class="link flex align-item_center" @click="changeCollect">
					<image v-if="collectExists" class="block"
						src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/8.png" />
					<image v-else class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/10.png" />
					<view>{{productDetail?.collectNum || 0}}人喜欢</view>
				</view>
			</view>
			<view class="money">￥{{fen2yuan(productDetail?.price) || 0}}</view>
		</view>
		<u-gap height="20rpx"></u-gap>
		<view class="v-details-card d-equity border-box">迟到赔</view>
		<u-gap height="20rpx"></u-gap>
		<!-- <view class="v-details-card d-equity border-box">规格参数</view>
		<u-gap height="20rpx"></u-gap> -->
		<view class="v-details-card d-tips border-box">
			<view class="title">
				温馨提示
			</view>
			<view class="content">
				{{productDetail?.introduction}}
				<!-- 	<view>1、本服务为预约服务，具体服务面积由江海管家根据客户实际面积和要求进行评估后确定;</view>
				<view>2、在您下单后2小时内会有工作人员跟您联系，非工作日4小时内跟您联系，请注意接听;</view>
				<view>3、不可用日期:2023年1月1日至2023年1月30日</view>
				<view>4、如您有任何疑问，请致电江海管家客服4000111890。</view> -->
			</view>
		</view>
		<view id="evaluate" class="mallDetails-card border-box v-evaluate">
			<view class="head flex align-item_center justify-content_space-between" @click="evaluate">
				<view class="head-title">商品评价（{{commentTotal}}）</view>
				<view class="head-data flex align-item_center">
					<view>{{productDetail?.goodRate}}%好评</view>
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/10.png" />
				</view>
			</view>
			<view class="user flex align-item_center" v-for="item in commentList" :key="item.id">
				<image class="block user-avatar" src="https://mall-admin.xinjiafu.net/mini-static/images/common/0.png" />
				<view class="user-info">
					<view class="flex align-item_center">
						<text>{{item.userNickname}}</text>
						<image v-for="item in item.scores" :key="item" class="block"
							src="https://mall-admin.xinjiafu.net/mini-static/images/points/9.png" />
					</view>
					<view>{{item.skuProperties.map(item=>item.valueName).join(',')}}</view>
				</view>
			</view>
			<view class="content">
				{{(commentList[0]?.content ||  commentList.length > 0)?(commentList[0]?.content||'用户默认好评'):"暂无评论" }}</view>
		</view>

		<view id="description" class="mallDetails-card border-box mallDetails-content" v-if="productDetail">
			<up-parse :content="productDetail?.description"></up-parse>
		</view>

		<u-gap height="210rpx"></u-gap>
		<view class="h-confirm" @click="confirm">立即下单</view>

		<!-- 规格与数量弹框 -->
		<s-select-sku v-if="productDetail" :goodsInfo="productDetail" :show="productType.show" @addCart="onAddCart"
			@buy="onBuy" @change="onSkuChange" @close="productType.show = false" :shoppingCart="false" :type="1" />

		<up-popup :show="pay.show" @close="payClose" closeable round="8rpx">
			<view class="h-pay">
				<u-gap height="60rpx"></u-gap>
				<view class="addres border-box v-details-card flex align-item_center">
					<image src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/9.png" />
					<view class="info">
						<view>河南省郑州市</view>
						<u-gap height="10rpx"></u-gap>
						<view>王老太 15290000000</view>
					</view>
				</view>

				<view class="sub flex align-item_center v-details-card border-box">
					<image class="block cover" src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/6.png" />
					<view class="info">
						<view class="name flex align-item_center">
							<view>上门服务</view>
							<view>（夏日清爽价）空调清洗</view>
						</view>
						<view class="foot flex align-item_center justify-content_space-between">
							<view class="money">￥59</view>
						</view>
					</view>
				</view>
				<view class="payConfirm" @click="confirm">
					<text>￥59</text>立即下单
				</view>
			</view>

		</up-popup>
	</view>
</template>

<script setup>
	import {
		itemStyle,
		activeStyle,
		inactiveStyle
	} from "@/common/index.js"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app"
	import {
		fen2yuan,
		convertProductPropertyList
	} from '@/sheep/hooks/useGoods.js';
	import FavoriteApi from "@/sheep/api/product/favorite.js"
	import CommentApi from "@/sheep/api/product/comment.js"
	import SpuApi from "@/sheep/api/product/spu.js"
	import sheep from '@/sheep';
	import {
		navigateTo
	} from "@/utils/tool.js"

	onPageScroll((val) => {
		if (val.scrollTop >= 20) navbarStatus.value = true;
		else navbarStatus.value = false;

		if (val.scrollTop >= 557 && val.scrollTop < 658) tabCurrent.value = 1;
		else if (val.scrollTop >= 658) tabCurrent.value = 2;
		else tabCurrent.value = 0;
	})

	const tabCurrent = ref(0);

	const jumpNav = (val) => {
		if (val.index === 0) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		} else if (val.index === 1) {
			uni.pageScrollTo({
				scrollTop: 557,
				duration: 300
			});
		} else if (val.index === 2) {
			uni.pageScrollTo({
				scrollTop: 658,
				duration: 300
			});
		}
	}


	const state = reactive({
		selectedSku: {}, // 选中的 SKU
	});

	// 规格变更
	function onSkuChange(e) {
		state.selectedSku = e;
	}

	// 添加购物车
	function onAddCart(e) {
		if (!e.id) {
			sheep.$helper.toast('请选择商品规格');
			return;
		}
		sheep.$store('cart').add(e);
		productType.show = false
	}

	// 立即购买
	function onBuy(e) {
		if (!state.selectedSku.id) {
			sheep.$helper.toast('请选择商品规格');
			return;
		}
		const items = [{
			skuId: e.id,
			count: e.goods_num
		}]
		navigateTo(`/points/mall_pay/index?items=${JSON.stringify(items)}&id=${productId.value}&type=money`)
	}


	const changeCollect = () => {
		if (collectExists.value) {
			FavoriteApi.deleteFavorite(productId.value).then(() => {
				favoriteExists()
				spuDetails()
			})
		} else {
			FavoriteApi.createFavorite(productId.value).then(() => {
				favoriteExists()
				spuDetails()
			})
		}
	}

	const payClose = () => {
		pay.show = false;
	}
	const pay = reactive({
		show: false,
	})

	const confirm = () => {
		productType.show = true;
	}

	const back = () => uni.navigateBack()

	const tabsList = reactive([{
		name: "全部",
	}, {
		name: "评价",
	}, {
		name: "详情",
	}, ])


	const productType = reactive({
		show: false
	})

	const commentList = ref([]);
	const commentTotal = ref(0)
	const commentPage = () => {
		CommentApi.getCommentPage(productId.value, 1, 1, 1).then(res => {
			commentList.value = res.data.list;
			commentTotal.value = res.data.total;
		})
	}

	const productDetail = ref()
	const productId = ref();
	const spuDetails = () => {
		SpuApi.getSpuDetail(productId.value).then(res => {
			productDetail.value = res.data;
		})
	}

	const collectExists = ref(false);
	const favoriteExists = () => {
		FavoriteApi.isFavoriteExists(productId.value).then(res => {
			collectExists.value = res.data
		})
	}

	const navbarStatus = ref(false);

	onShow(() => {
		spuDetails()
	})

	onLoad((option) => {
		if (option.id) {
			productId.value = option.id
			favoriteExists()
			commentPage()
		}
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.mallDetails-content {
		padding: 20rpx;
	}

	.h-pay {
		background: #F8F3E7;
		border-radius: 8rpx;
		padding: 30rpx 20rpx;


		.payConfirm {
			margin-top: 88rpx;
			width: 710rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			border-radius: 100rpx;
			background: #A72530;

			font-size: 32rpx;
			font-weight: 400;
			color: rgba(245, 245, 245, 1);
		}

		.sub {
			margin-top: 28rpx;
			padding: 36rpx 32rpx;

			.info {
				.foot {
					margin-top: 56rpx;

					.review {
						view {
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(153, 153, 153, 1);
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}

					.money {
						font-size: 40rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 57.92rpx;
						color: rgba(167, 37, 48, 1);
					}
				}

				.name {
					view:last-child {
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(64, 3, 3, 1);
					}

					view:first-child {
						width: 132rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						border-radius: 100rpx;
						background: #A72530;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.cover {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 42rpx;
			}
		}

		.addres {
			padding: 22rpx 38rpx;

			.info {
				view {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(64, 3, 3, 1);
				}
			}

			image {
				width: 40rpx;
				height: 44rpx;
				margin-right: 60rpx;
			}
		}
	}

	.h-confirm {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 20;
		bottom: 65rpx;
		width: 710rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 100rpx;
		background: #A72530;

		font-size: 32rpx;
		font-weight: 400;
		color: rgba(245, 245, 245, 1);
	}

	.mallDetails-card {
		margin: 20rpx auto 0;
		width: 710rpx;
		border-radius: 8rpx;
		background: #EDE2CD;
	}

	.mallDetails-head {
		width: 750rpx;
		height: 628rpx;
		background: #fff;

		image {
			width: 360rpx;
			height: 360rpx;
			margin-top: 72rpx;
		}
	}

	.d-tips {
		padding: 30rpx 38rpx;
		margin: 0rpx auto;

		.content {
			margin-top: 14rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(64, 3, 3, 1);
			white-space: pre-line;
		}

		.title {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(64, 3, 3, 1);
		}
	}

	.d-equity {
		padding: 23rpx 64rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 40.54rpx;
		color: rgba(64, 3, 3, 1);
	}

	.goods {
		width: 750rpx;
		height: 176rpx;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		background: #EFE5D0;
		padding: 24rpx 30rpx;

		.money {
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(167, 37, 48, 1);
			margin-top: 22rpx;
		}

		.header {

			.link {
				view {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(153, 153, 153, 1);
				}

				image {
					width: 32rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
			}
		}
	}

	.navbar {
		width: 100vw;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		background: #EBEBEB;
		transition: opacity .2s;

		.main {
			padding: 27rpx 22rpx;

			.tabs {
				width: 560rpx;
			}

			.back {
				width: 28rpx;

				image {
					width: 18rpx;
					height: 34rpx;
				}
			}
		}
	}

	.mallDetails-head {
		width: 750rpx;
		height: 628rpx;
		background: #fff;

		image {
			width: 360rpx;
			height: 360rpx;
			margin-top: 72rpx;
		}
	}
</style>